<template>
  <div class="panel-group-frame">
    <el-input v-if="showFilter" v-model="filterValue" class="panel-filter" :placeholder="placeholder" />
    <div class="panel-taggle">
      <i v-if="listModel" class="panel-taggle-item fas fa-list-ul" @click="currentModel=MODEL.listModel" />
      <i v-if="tileModel" class="panel-taggle-item fas fa-th" @click="currentModel=MODEL.tileModel" />
      <i v-if="tableModel" class="panel-taggle-item fas fa-table" @click="currentModel=MODEL.tableModel" />
      <i v-if="treeModel" class="panel-taggle-item fas fa-layer-group" @click="currentModel=MODEL.treeModel" />
    </div>
    <panel-list
      v-if="displayModel===MODEL.listModel"
      class="panel-content"
      :data="filtedData"
      :select-single="selectSingle"
      :show-icon="showIcon"
      :expand="expanded"
      :show-filter="false"
      :filter="filterValue"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
    <panel-tile
      v-if="displayModel===MODEL.tileModel"
      class="panel-content"
      :data="filtedData"
      :show-icon="showIcon"
      :expand="expanded"
      :show-filter="false"
      :filter="filterValue"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
    <panel-table
      v-else-if="displayModel===MODEL.tableModel"
      class="panel-content"
      :data="filtedData"
      :show-icon="showIcon"
      :expand="expanded"
      :show-filter="false"
      :filter="filterValue"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
    <panel-tree
      v-else-if="displayModel===MODEL.treeModel"
      class="panel-content"
      :select-single="selectSingle"
      :data="filtedData"
      :show-icon="showIcon"
      :expand="expanded"
      :show-filter="false"
      :filter="filterValue"
      @click="$emit('click',$event)"
      @dblclick="$emit('dblclick',$event)"
      @contextmenu="$emit('contextmenu',$event)"
    />
  </div>
</template>
<script>
const MODEL = {
  no: 0,
  listModel: 1,
  tileModel: 2,
  tableModel: 3,
  treeModel: 4
}
export default {
  name: 'PanelGroup',
  components: {
    PanelList: () => import('@components/PanelList.vue'),
    PanelTile: () => import('@components/PanelTile.vue'),
    PanelTable: () => import('@components/PanelTable.vue'),
    PanelTree: () => import('@components/PanelTree.vue')
  },
  props: {
    data: { // panel data set
      type: Array,
      required: true,
      default: () => []
    },
    treeTemplate: { // tree node display props
      type: Object,
      required: false,
      default: () => ({
        label: 'name',
        key: 'item_uid',
        parent: 'parent_uid'
      })
    },
    expand: { // flag of tree expand;false: default,shrinked;true: expanded
      type: Boolean,
      required: false,
      default: false
    },
    selectSingle: { // flag of tree selectSingle;false: selectMulti,true: selectSingle
      type: Boolean,
      required: false,
      default: true
    },
    showIcon: { // flag of show data icon(item.info.icon)
      type: Boolean,
      required: false,
      default: false
    },
    listModel: { // flag of component list model;false: default,list;true: list
      type: Boolean,
      required: false,
      default: false
    },
    tileModel: { // flag of component tile model;false: default,tree list;true: tree table
      type: Boolean,
      required: false,
      default: true
    },
    tableModel: { // flag of component table model;false: default,tree list;true: tree table
      type: Boolean,
      required: false,
      default: false
    },
    treeModel: { // flag of component tree model;false: default,tree list;true: tree table
      type: Boolean,
      required: false,
      default: false
    },
    tableTemplate: { // table cloumn display props
      type: Object,
      required: false,
      default: () => ({
        id: { name: 'ID' },
        name: { name: '名称' },
        flag: { name: '标识' }
      })
    },
    showFooter: { // flag of footer display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    showTaggle: { // flag of taggle display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    showFilter: { // flag of filter input display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    }
  },
  data() {
    return {
      MODEL,
      filterValue: this.filter,
      expanded: this.expand,
      currentModel: MODEL.no
    }
  },
  computed: {
    displayModel() {
      if (this.currentModel) {
        return this.currentModel
      } else if (this.listModel) {
        return this.MODEL.listModel
      } else if (this.tileModel) {
        return this.MODEL.tileModel
      } else if (this.tableModel) {
        return this.MODEL.tableModel
      } else if (this.treeModel) {
        return this.MODEL.treeModel
      } else {
        return this.MODEL.tileModel
      }
    },
    filtedData() {
      let result = []
      if (this.filterValue && this.filterValue.trim()) {
        const tmp = this.data.filter(item =>
          item.id.toLowerCase().indexOf(this.filterValue.trim().toLowerCase()) !== -1 ||
          item.name.toLowerCase().indexOf(this.filterValue.trim().toLowerCase()) !== -1
        ).reduce((result, item) => ([...result, ...item.branch.split(',')]), [])
        result = this.data.filter(item => tmp.indexOf(item.uid) !== -1)
      } else {
        result = this.data
      }
      return result
    }
  }
}
</script>
<style scoped>
.panel-group-frame {
  display: flex;
  flex-flow: column nowrap;
  align-content: flex-start;
}
.panel-filter {
  margin-right:auto;
}
.panel-taggle {
  display: flex;
  flex-flow: row-reverse nowrap;
}
.panel-taggle-item {
  padding: .5rem;
  font-size: 2rem;
}
</style>
